<template>
  <view class="lend">
    <view class="user">
      <view class="out one">
        <view class="tag">出借人</view>
        <view class="info">
          <view class="mobile">166****0000</view>
          <view class="name">张*</view>
        </view>
      </view>
      <view class="out">
        <view class="tag in">借款人</view>
        <view class="info">
          <view class="mobile">137****0000</view>
          <view class="name">李*</view>
        </view>
      </view>
    </view>
    <view class="form-wrapper">
      <u-form :model="form" ref="uForm" label-width="200">
        <u-form-item label="借款金额" left-icon="info-circle">
          <view class="num-wrapper">
            <u-input
              v-model="form.num"
              placeholder="请输入金额"
              type="number"
              height="120"
              :disabled="true"
            />
            <span class="text">人民币 壹佰元整</span>
          </view>
        </u-form-item>
        <u-form-item label="借款事由">
          <u-input
            v-model="form.reason"
            type="select"
            :border="true"
            :disabled="true"
          />
        </u-form-item>
        <u-form-item label="借款期限">
          <u-input
            placeholder="请选择日期"
            type="select"
            :border="true"
            v-model="form.date"
            :disabled="true"
          />
        </u-form-item>
      </u-form>
    </view>
    <view class="form-wrapper">
      <u-form label-width="200">
        <u-form-item label="约定利率" left-icon="info-circle">
          <u-input
            v-model="form.rate"
            type="select"
            :border="true"
            :disabled="true"
          />
        </u-form-item>
        <u-form-item label="支付方式">
          <u-input
            v-model="form.paytype"
            type="select"
            :disabled="true"
            :border="true"
          />
        </u-form-item>
        <u-form-item label="还款方式">
          <u-input
            v-model="form.backtype"
            type="select"
            :border="true"
            :disabled="true"
          />
        </u-form-item>
      </u-form>
    </view>
    <view class="form-wrapper">
      <view class="title">
        <view class="txt">其他约定</view>
        <view class="tag">选填</view>
      </view>
      <view class="desc">提前还账可以不计算利息</view>

      <u-icon name="photo" size="80" :color="$u.color['lightColor']"></u-icon>
    </view>
    <view class="btn-wrapper">
      <view class="txt">确认无误</view>
      <view class="time" v-if="time !== 0">({{ time }})</view>
    </view>
  </view>
</template>
<script>
export default {
  onLoad() {
    this.startCount()
  },
  data() {
    return {
      value: '',
      show: false,
      showRate: false,
      isCalendarShow: false,
      showPaytype: false,
      showBacktype: false,

      actionSheetList: [
        {
          text: '购买汽车'
        },
        {
          text: '资金周转'
        }
      ],
      showRateSheetList: [
        {
          text: '2.0%'
        },
        {
          text: '3.0%'
        }
      ],
      paytypeSheetList: [
        {
          text: '微信支付'
        },
        {
          text: '银行卡支付'
        }
      ],
      backtypeSheetList: [
        {
          text: '一次性还本'
        },
        {
          text: '多次还清'
        }
      ],
      form: {
        num: 100,
        reason: '购买汽车',
        date: '2024-03-18',
        rate: '2.0%',
        paytype: '微信支付',
        backtype: '一次性还本'
      },
      time: 3,
      action: 'http://www.example.com/upload',
      fileList: [
        {
          url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg'
        }
      ]
    }
  },
  methods: {
    // 点击actionSheet回调
    actionSheetCallback(index) {
      this.form.reason = this.actionSheetList[index].text
    },
    showRateSheetCallback(index) {
      this.form.rate = this.showRateSheetList[index].text
    },
    paytypeSheetCallback(index) {
      this.form.paytype = this.paytypeSheetList[index].text
    },
    backtypeSheetCallback(index) {
      this.form.backtype = this.backtypeSheetList[index].text
    },
    onDateChange(v) {
      console.log(v)
      this.form.date = v.result
    },
    startCount() {
      let timer = setTimeout(() => {
        this.time--
        if (this.time === 0) {
          timer = null
          clearTimeout(timer)
        } else {
          this.startCount()
        }
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
@function rpx($num) {
  @return $num + rpx;
}

.lend {
  font-size: rpx(30);
  padding: rpx(20);
  .user {
    background-color: #fff;
    width: 100%;
    border-radius: rpx(20);

    .out {
      padding: rpx(10) rpx(20) rpx(40);
      margin: rpx(20);
      &.one {
        border-bottom: 1px solid #ccc;
      }
      .tag {
        background-color: #2a82e4;
        color: #fff;
        border-radius: rpx(10);
        height: rpx(60);
        width: rpx(140);
        text-align: center;
        line-height: rpx(60);
        font-size: rpx(24);
        margin-bottom: rpx(20);
        &.in {
          background-color: #ff8d1a;
        }
      }

      .info {
        display: flex;
        align-items: center;

        .name {
          padding-left: rpx(20);
          margin-left: rpx(20);
          border-left: 1px solid #000;
        }
      }
    }
  }
  .form-wrapper {
    background-color: #fff;
    border-radius: rpx(20);
    margin: rpx(30) auto;
    padding: rpx(20);

    .num-wrapper {
      position: relative;
      .text {
        position: absolute;
        top: rpx(72);
      }
    }
    .title {
      display: flex;
      align-items: center;
      color: #808080;
      .tag {
        text-align: center;
        background: rgba(204, 204, 204, 0);
        color: rgba(229, 229, 229, 1);
        border: 2px solid rgba(229, 229, 229, 1);
        font-size: rpx(20);
        padding: 0 rpx(20);
        border-radius: rpx(6);
        margin-left: rpx(30);
      }
    }
    .desc {
      color: #000;
      margin: rpx(30) 0;
    }
  }
}
.slot-btn {
  width: 200rpx;
  height: 140rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff;
  border-radius: 10rpx;
}

.slot-btn__hover {
  background-color: rgb(235, 236, 238);
}

.btn-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background-color: #2a82e4;
  border-radius: rpx(20);
  border: 1px solid transparent;
  margin: rpx(60) auto;
  width: rpx(428);
  height: rpx(85);
}
</style>
